<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>News21 Stories Map</title>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ google_key }}'></script>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/framedCloud.css" type="text/css" />


    <style type="text/css">
        #map {
            width: 100%;
            height: 80%;
            border: 1px solid black;
        }
        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
    </style>

    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;

        function init(){
            var options = {
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                                 20037508.34, 20037508.34)
            };
            map = new OpenLayers.Map('map', options);
            var mapnik = new OpenLayers.Layer.TMS(
                "OpenStreetMap (Mapnik)",
                "http://tile.openstreetmap.org/",
                {
                    type: 'png', getURL: osm_getTileURL,
                    displayOutsideMaxExtent: true,
                    attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
                }
            );
            map.addLayer(mapnik);
            map.addLayer(new OpenLayers.Layer.Google("Google",{sphericalMercator:true}));
            kml_layer = new OpenLayers.Layer.GML("kml", "{{ kml_feed }}",
               {
                format: OpenLayers.Format.KML,
                projection: map.displayProjection,
                formatOptions: {
                  extractStyles: true,
                  extractAttributes: true
                }
               })
            map.addLayer(kml_layer);
             selectControl = new OpenLayers.Control.SelectFeature(map.layers[2],
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

            map.addControl(selectControl);
            selectControl.activate();
            kml_layer.events.register("loadend",
                                         kml_layer,
                                         function(){ this.map.zoomToExtent(this.getDataExtent()); }
                                        );
            kml_layer.loadGML();
            /* map.zoomToExtent(new OpenLayers.Bounds(68.774414,11.381836,123.662109,34.628906).transform(map.displayProjection, map.projection));*/
            map.addControl(new OpenLayers.Control.LayerSwitcher());

        }
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken",
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                     "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description + " -- " + "<a href='" + feature.attributes.url +"'>read more</a>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
        function osm_getTileURL(bounds) {
            var res = this.map.getResolution();
            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
            var z = this.map.getZoom();
            var limit = Math.pow(2, z);

            if (y < 0 || y >= limit) {
                return OpenLayers.Util.getImagesLocation() + "404.png";
            } else {
                x = ((x % limit) + limit) % limit;
                return this.url + z + "/" + x + "/" + y + "." + this.type;
            }
        }
    </script>
  </head>
  <body onload="init()" style="background:#323331;">
<div id="user_banner" class="profile-banner-box" style="text-align:center;">	
				

		<map name="imgmap"><area shape="rect" coords="59,77,176,110" href="http://asu.news21.com" alt="asu.news21.com"><area shape="rect" coords="178,76,262,110" href="http://berkeley.news21.com" alt="berkeley.news21.com"><area shape="rect" coords="265,76,365,109" href="http://columbia.news21.com" alt="columbia.news21.com"><area shape="rect" coords="368,77,468,110" href="http://umd.news21.com" alt="umd.news21.com"><area shape="rect" coords="471,77,603,110" href="http://unc.news21.com" alt="unc.news21.com"><area shape="rect" coords="606,77,745,110" href="http://northwestern.news21.com" alt="northwestern.news21.com"><area shape="rect" coords="747,77,808,109" href="http://usc.news21.com" alt="usc.news21.com"><area shape="rect" coords="811,77,905,110" href="http://syracuse.news21.com" alt="syracuse.news21.com"><area shape="rect" coords="58,37,251,74" href="http://news21.com" alt="news21.com"></map>
			<img usemap="#imgmap" src="http://i2.ytimg.com/u/mNZ3JTOGOFwtZUJp9IwwmA/profile_header.jpg?v=4a762396" onmousedown="trackEvent('ChannelPage', 'banner_link_imagemap', 'News21')" width="960" height="150" style="border:0px;">

			</div>

    <!-- h1 id="title">News21 Stories Map</h1 --!>
    <div id="map" class="smallmap"></div>
  </body>
</html>
